<template>
    <div class="body education" v-if="JSON.stringify(pageInfo) != '{}'">
        <!-- 广告位 -->
        <div class="advertisement">
            <img src="../../assets/newimg/peixun/list_img_bj.png" alt="" />
        </div>
        <!-- 内容区域 -->

        <div class="edu_box">
            <dl>
                <dd>
                    <img :src="pageInfo.image_link" alt="" />
                </dd>
                <dt>
                    <h1>{{ pageInfo.title }}</h1>
                    <h2>
                        <span>免费</span>已有
                        <span>{{ pageInfo.apply_count }}</span> 人报名
                    </h2>
                </dt>
            </dl>

            <dl>
                <dd><h1>招生简章</h1></dd>
                <dt>
                    <h3 v-html="replaceText(pageInfo.content)"></h3>
                </dt>
            </dl>

            <dl>
                <dd><h1>学制学费</h1></dd>
                <dt>
                    <h3>{{ pageInfo.fee }}</h3>
                </dt>
            </dl>

            <dl>
                <dd><h1>招生范围</h1></dd>
                <dt>
                    <h3>{{ pageInfo.range }}</h3>
                </dt>
            </dl>

            <dl>
                <dd><h1>缴费</h1></dd>
                <dt>
                    <h3>{{ pageInfo.pay_method }}</h3>
                </dt>
            </dl>

            <dl>
                <dd><h1>报名方式</h1></dd>
                <dt>
                    <h3>{{ pageInfo.signup_method }}</h3>
                </dt>
            </dl>
        </div>
        <div class="j_newbutton">
            <div class="j_newbtn" @click="propsOneKey = !propsOneKey">
                免费报名
            </div>
        </div>
        <!-- 弹窗一 -->
        <van-popup v-model="propsOneKey" round closeable>
            <div class="ed_props_box1">
                <h1>中南财经政法大学</h1>
                <div
                    class="ed_li"
                    v-for="(item, index) in checkInfo"
                    :key="index"
                >
                    <h2>{{ item.name }}</h2>
                    <div>
                        <ul>
                            <li
                                v-for="(el, i) in item.children"
                                :key="i"
                                :class="{
                                    checkActive: item.checkName == el,
                                }"
                                @click="checkli(index, el)"
                            >
                                {{ el }}
                            </li>
                        </ul>
                    </div>
                </div>

                <div
                    class="smalBtn"
                    @click="submitPropOne"
                    :class="{ smalBtn_class: propOneBtnKey }"
                >
                    <span>下一步</span>
                </div>

                <h4>个人信息将会严格按照监管要求加密保存</h4>
            </div>
        </van-popup>

        <!-- 弹窗二 -->
        <van-popup v-model="propsTwoKey" round closeable>
            <div class="ed_props_box2">
                <h1>中南财经政法大学</h1>
                <h2>*请填写真实有效信息</h2>

                <div class="form_li">
                    <label>姓名</label>
                    <input
                        type="text"
                        placeholder="请输入姓名"
                        class="van-field__control"
                        v-model="propTwoInfo.true_name"
                    />
                </div>

                <div class="form_li">
                    <label>手机号</label>
                    <input
                        type="tel"
                        placeholder="请输入手机号"
                        class="van-field__control"
                        v-model="propTwoInfo.mobile"
                    />
                </div>

                <div class="form_li" @click="ischeckCity = true">
                    <label>城市</label>
                    <input
                        type="text"
                        placeholder="请输入城市"
                        readonly
                        class="van-field__control"
                        v-model="addResval"
                    />
                </div>

                <div class="smalBtn smalBtn_class" @click="submitPropoTwo()">
                    <span>下一步</span>
                </div>

                <h4>个人信息将会严格按照监管要求加密保存</h4>
            </div>
        </van-popup>

        <!-- 地址选择组件 -->
        <component
            :is="'Addres'"
            v-if="ischeckCity"
            @checkAddresData="checkAddresfn"
            @closeAddresProps="closeAddresPropsfn"
        ></component>

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
import Addres from '../../components/Addres.vue';
export default {
    name: '',
    components: {
        Addres,
    },
    data() {
        return {
            propsOneKey: false,
            propOneBtnKey: false,
            // 弹窗一选择数据
            checkInfo: [],
            propsTwoKey: false,
            ischeckCity: false, //地址选择
            addResval: '',
            // 弹窗二数据
            propTwoInfo: {
                true_name: '',
                mobile: '',
                province: '',
                city: '',
                district: '',
            },
            // 页面数据
            pageInfo: {},
        };
    },
    computed: {},
    mounted() {
        this.getPageInfo();

        this.getDetail();
    },
    methods: {
        // 获取页面详情信息
        getDetail() {
            axiosPost(
                '/api/education/info',
                {
                    education_promotion_id: this.$route.query.id,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.pageInfo = res.data;
                }
            );
        },
        // 关闭地址选择
        closeAddresPropsfn(data) {
            this.ischeckCity = data;
        },
        // 地址选择回调
        checkAddresfn(selectedOptions) {
            // console.log(selectedOptions);
            this.addResval = selectedOptions
                .map((option) => option.text)
                .join(' ');

            this.propTwoInfo.province = selectedOptions[0].value;
            this.propTwoInfo.city = selectedOptions[1].value;
            this.propTwoInfo.district = selectedOptions[2].value;
        },
        // 弹窗二提交
        submitPropoTwo() {
            let num = 0;
            for (let i in this.propTwoInfo) {
                if (this.propTwoInfo[i]) {
                    num++;
                }
            }

            if (num != 5) {
                return Toast({
                    message: '请补全信息',
                    duration: 2000,
                });
            }

            if (
                !/^1[3456789]\d{9}$/.test(
                    this.propTwoInfo.mobile.replace(/\s+/g, '')
                )
            ) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }

            axiosPost(
                '/api/education/apply',
                {
                    education_promotion_id: this.$route.query.id,
                    education_level: this.checkInfo[1].checkName,
                    age_range: this.checkInfo[0].checkName,
                    exam_level: this.checkInfo[2].checkName,
                    true_name: this.propTwoInfo.true_name,
                    mobile: this.propTwoInfo.mobile,
                    province: this.propTwoInfo.province,
                    city: this.propTwoInfo.city,
                    district: this.propTwoInfo.district,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.$router.go(-1);
                }
            );
        },
        // 弹窗一提交
        submitPropOne() {
            if (!this.propOneBtnKey) {
                return Toast({
                    message: '请选择信息',
                    duration: 2000,
                });
            }
            this.propsOneKey = false;
            this.propsTwoKey = true;
        },
        // 弹窗一选项切换
        checkli(index, el) {
            this.checkInfo[index].checkName = el;
            let num = 0;
            this.checkInfo.forEach((el) => {
                if (el.checkName) {
                    num++;
                }
            });
            if (num == this.checkInfo.length) {
                this.propOneBtnKey = true;
            }
        },
        // 获取页面信息
        getPageInfo() {
            axiosPost('/api/education/apply_info', {}, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.checkInfo = [];
                for (let i in res.data) {
                    let name = '';
                    switch (i) {
                        case 'education_level':
                            name = '学历层次';
                            break;
                        case 'age_range':
                            name = '年龄';
                            break;
                        case 'exam_level':
                            name = '考取层次';
                            break;
                        default:
                            break;
                    }
                    let params = {
                        name: name,
                        checkId: i,
                        checkName: '',
                        children: [],
                    };
                    for (let j in res.data[i]) {
                        params.children.push(res.data[i][j]);
                    }
                    this.checkInfo.push(params);
                }
            });
        },
    },
};
</script>
<style lang="less" scope src="../../assets/css/proposTwo.less"></style>
<style lang="less" scope>
.education {
    .advertisement {
        width: 16rem;

        img {
            width: 100%;
        }
    }

    .edu_box {
        dl {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 0.64rem 0;
            margin: 0 0.4267rem;
            border-bottom: 2px solid #eeeeee;

            dd {
                width: 3rem;

                h1 {
                    font-size: 0.5973rem;
                    font-weight: 500;
                    font-size: 0.6253rem;
                    margin-top: 0.2rem;
                }

                img {
                    width: 100%;
                }
            }

            dt {
                margin-left: 0.4267rem;
                width: 11.6693rem;

                h1 {
                    font-size: 0.7253rem;
                    font-weight: 500;
                    color: #000000;
                    line-height: 1.024rem;
                }

                h2 {
                    font-size: 0.4693rem;
                    font-weight: 400;
                    color: #858585;
                    margin-top: 0.32rem;

                    span {
                        color: #fe333d;
                    }
                }

                h3 {
                    font-size: 0.5973rem;
                    font-weight: 400;
                    color: #333333;
                    line-height: 1.024rem;
                }
            }
        }
    }

    // 弹窗一
    .ed_props_box1 {
        width: 15.1467rem;
        max-height: 18.88rem;
        background: #ffffff;
        border-radius: 0.4267rem;

        h1 {
            font-size: 0.8107rem;
            font-weight: 500;
            color: #000000;
            text-align: center;
            margin: 0.896rem auto 0;
        }

        .ed_li {
            margin: 0.5973rem 0.7467rem 0;
            border-bottom: 1px solid #d2d3d5;
            padding-bottom: 0.54rem;

            h2 {
                font-size: 0.5973rem;
                font-weight: 400;
                color: #000000;
                line-height: 0.64rem;
            }

            ul {
                overflow: hidden;

                .checkActive {
                    background: #fff1f1;
                    border: 1px solid #fd7779;
                    color: #fd7779;
                }

                li {
                    height: 1.5787rem;
                    margin-top: 0.4267rem;
                    border: 1px solid #d2d3d5;
                    border-radius: 0.7893rem;
                    text-align: center;
                    line-height: 1.5787rem;
                    font-size: 0.5973rem;
                    font-weight: 400;
                    color: #888888;
                    padding: 0 0.7253rem;
                    margin-right: 0.2773rem;
                    white-space: nowrap;
                    float: left;
                }
            }
        }

        h4 {
            font-size: 0.5547rem;
            font-weight: 400;
            color: #b8b8b8;
            line-height: 0.64rem;
            text-align: center;
            padding-bottom: 1rem;
        }
    }
    
}
</style>
